<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8" />
    <title></title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8" />

    <link rel="stylesheet" href="../lib/layui/css/layui.css" />
    <link rel="stylesheet" href="css/article_list.css" />
    <script src="../js/jquery.min.js"></script>


    <script src="../lib/template-web.js"></script>
    <script src="./js/article_list.js"></script>
    <script src="../lib/layui/layui.all.js"></script>

    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <!-- 卡片区域 -->
    <div class="layui-card">
        <div class="layui-card-header">文章列表</div>
        <div class="layui-card-body">
            <!-- 筛选区域 -->
            <form class="layui-form" id="form-search">
                <div class="layui-form-item layui-inline">
                    <select name="catename"></select>
                </div>
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">关键字</label>
                    <div class="layui-input-block">
                        <input type="text" name="keywords" placeholder="关键字" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <input type="text" class="layui-input shijian" id="test1">
                </div>
                <div class="layui-form-item layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">筛选</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>

            </form>
            <!-- 列表 -->
            <table class="layui-table">
                <colgroup>
                    <col width="80" />
                    <col width="80" />
                    <col width="400" />
                    <col />
                    <col />
                    <col />
                    <col />
                    <col />
                    <col />
                </colgroup>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>文章ID</th>
                        <th>文章标题</th>
                        <th>文章作者</th>
                        <th>文章分类</th>
                        <th>缩略图</th>
                        <th>阅读次数</th>
                        <th>发布时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
            <!-- 分页 -->
            <div id="pageBox"></div>
            <!-- 表格模板引擎字符串数据 -->
            <script type="text/html" id="tpl-table">
                {{each data}}
                <tr>
                    <td>{{$index+1}}</td>
                    <td>{{$value.id}}</td>
                    <td>{{$value.title}}</td>
                    <td>{{$value.author}}</td>
                    <td>{{$value.catename}}</td>
                    {{if $value.picimg.length !=1}}
                    <td><img src="https://img1.baidu.com/it/u=2151419446,3612789904&fm=26&fmt=auto&gp=0.jpg"></td>
                    {{else}}
                    <td><img src="{{$value.picimg[0].url}}"></td>> {{/if}}

                    <td>{{$value.click}}</td>
                    <td>{{$value.createtime | dateFormat}}</td>
                    <td>
                        <button type="button" class="layui-btn layui-btn-xs">编辑</button>
                        <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete" data-id="{{$value.id}}">删除</button>
                    </td>
                </tr>
                {{/each}}
            </script>
            <!-- 筛选区域模板 -->
            <script type="text/html" id="tpl-cate">
                <option value="">文章分类</option>
                {{each data}}
                <option value="{{$value.id}}">{{$value.catename}}</option>
                {{/each}}
            </script>
        </div>
    </div>

</body>

</html>